<template>
  <div class="w-1/5 pl-2 border-l ml-2 h-full">
    <div class="h-24 border border-primary rounded p-2 bg-secondary">
      <MedicineInfo class="!h-12" :value="{ mc: currentRow.ypmc || '请选择药品', gg: currentRow.gg, cj: currentRow.cj }" />
      <div class="flex justify-between">
        <div>{{ currentRow.ph }}</div>
        <div>
          <span>
            应扫<span class="text-red-500">{{ currentRow.thsl || 0 }}</span>
          </span>
          <span>
            已扫<span class="text-red-500">{{ currentRow.kcTraceCodeRecordList?.length || 0 }}</span>
          </span>
          <span>
            还剩<span class="text-red-500">{{ lastCode || 0 }} </span>未扫
          </span>
        </div>
      </div>
    </div>
    <div class="mt-4">
      <a-radio-group v-model:value="scType" :disabled="!Number(currentRow.thsl) > 0">
        <a-radio value="0">盒码</a-radio>
        <a-radio value="1">中码</a-radio>
        <a-radio value="2">箱码</a-radio>
      </a-radio-group>
    </div>
    <div class="mt-4">
      <a-input v-model:value="scInput" :disabled="lastCode === 0 || !currentRow.ypmc" placeholder="请扫码" maxlength="20" @keydown.enter="onInputEnter" />
    </div>
    <div class="mt-4">
      <BaseTable :data-source="currentRow.kcTraceCodeRecordList" max-fill :columns="scColumns" :scroll="{ x: 500 }">
        <template #bodyCell="{ column, index, text, record }">
          <template v-if="column.dataIndex === 'xh'">
            {{ index + 1 }}
          </template>
          <template v-else-if="column.dataIndex === 'action'">
            <a-button type="text" danger size="small" @click="onDelSc(record)">删除</a-button>
          </template>
          <template v-else>
            {{ text || '-' }}
          </template>
        </template>
      </BaseTable>
    </div>
  </div>
</template>

<script setup>
import { message } from 'ant-design-vue'

const scColumns = [
  { title: '序号', dataIndex: 'xh', width: 60 },
  { title: '盒码', dataIndex: 'tcCode', width: 160, ellipsis: true },
  { title: '中码', dataIndex: 'tcMidCode', width: 100, ellipsis: true },
  { title: '箱码', dataIndex: 'tcBigCode', width: 100, ellipsis: true },
  { title: '操作', dataIndex: 'action', fixed: 'right' }
]
const emit = defineEmits(['success'])

const props = defineProps({
  currentRow: {
    type: Object,
    default: () => ({})
  }
})
const scInput = ref('')
const scType = ref('0')
const lastCode = computed(() => {
  return props.currentRow.thsl - props.currentRow.kcTraceCodeRecordList?.length
})

const onInputEnter = async () => {
  if (lastCode.value === 0) return message.error('已扫完')
  if (!scInput.value) return message.error('请扫码')
  const params = { ...props.currentRow, thdh: props.currentRow.lsh }
  switch (scType.value) {
    case '0':
      params.tcCode = scInput.value
      break
    case '1':
      params.tcMidCode = scInput.value
      break
    case '2':
      params.tcBigCode = scInput.value
      break
    default:
      break
  }
  const { msg, code } = await post('/drugStorage/traceCode/doSaveKcReturnTraceCodeRecord', params)
  if (code !== 0) return message.error(msg)
  message.success('扫码成功')
  scInput.value = ''
  emit('success')
}
const onDelSc = async (row) => {
  const { msg, code } = await post('/drugStorage/traceCode/doDelReturnKcTraceCodeRecord', { id: row.id })
  if (code !== 0) return message.error(msg)
  message.success('删除成功')
  emit('success')
}
</script>
<style lang="less" scoped></style>
